<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link rel="stylesheet" href="../../css/common.css" />
		
		<style>
			#phoneLogo,#passwordLogo{
				color: red;
				background-image: url(../../img/error.png);
				width: 14px;
    			height: 16px;
    			background-position: -36px -286px;
    			display: none;
			}
			
			span{
				color: #C00;
			}
		</style>
	</head>
	<body>
		
		<form onsubmit="return login();" action="td.html">
			<table>
				<tr>
					<td align="right">手机号码:</td>
					<td>
						<input type="text" name="phone" />
					</td>
					<td>
						<label id="phoneLogo"></label>
						<span id="phoneError"></span>
					</td>
				</tr>
				<tr>
					<td align="right">密码:</td>
					<td>
						<input type="password" name="password"  value="123"/>
					</td>
					<td>
						<label id="passwordLogo"></label>
						<span id="passwordError"></span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
		
		<script>
			
			function login(){
				
				//清空以前的错误提示
				document.getElementById('phoneError').innerText='';
				document.getElementById('passwordError').innerText='';
				
				//隐藏1个东东
				document.getElementById('phoneLogo').style.display='none';
				document.getElementById('passwordLogo').style.display='none';
				
				//counter用来记录错误的个数
				var counter=0;
				//getElementsByName 通过name属性去找标签
				var phone = document.getElementsByName('phone')[0].value;
				//alert(phone);
				
				//var length = phone.length;
				
				//长度是11位  必须是数字  
				
				//139 131 136 134 137 135 187 188 159 186  147
				//14726583118 不通过
				//第1位必须是1 全角的数字是不行的。
				
				var re=/^1[3|5|8][0-9]{9}$/;
				
				var b = re.test(phone);
				//alert(b);
				
				//手机号码： 验证是否是11位  没有验证数字的问题： 下午正则表达式
				if(!b){
					var phoneError = document.getElementById('phoneError');
					phoneError.innerText='手机号码有误';
					//高手
					var phoneLogo =document.getElementById('phoneLogo');
					phoneLogo.style.display='block';
					phoneLogo.style.float='left';
					phoneLogo.style.marginRight='5px';
					counter++;
					
				}
				
				//密码： 6<=pw<=16
				var password = document.getElementsByName('password')[0].value;
				//alert(phone);
				
				var len = password.length;
				if(len<6 || len>16){
					var passwordError = document.getElementById('passwordError');
					//高手
					var passwordLogo =document.getElementById('passwordLogo');
					passwordLogo.style.display='block';
					passwordLogo.style.float='left';
					passwordLogo.style.marginRight='5px';
					
					passwordError.innerText='密码错误';
					counter++;
				}
				
				if(counter>0){
					// 验证不通过。不提交表单
					return false;
				}
			}
			
		</script>
	</body>
</html>
